import React, { useEffect, useState } from 'react'
import Item from './Item'
import PubSub from 'pubsub-js'
export default function List() {
  //初始化一个state，保存订阅回来的数据，当订阅回来以后数据改变重新渲染
  const [searchList, setSearchList] = useState({ isInit: true, isSearch: false, data: [] })
  useEffect(() => {
    //这里订阅的数据是发布的对象
    PubSub.subscribe('github', (_, data) => {
      setSearchList(data)
    })
  }, [])
  //给组件添加id，并将内容展开传递给子组件，通过请求的状态改变视图，这里的初始化数据为一个对象，并在其中添加isInit，isSearch属性，两属性状态的改变很巧妙
  return (
    <div className="row">
      {
        searchList.isInit ? <h2>请开始搜索</h2> :
          searchList.isSearch ? <h2>正在搜索中。。。</h2> :
            searchList.data.map(item => {
              return <Item key={item.id}{...item} />
            })
      }
    </div>
  )
}
